<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }

    .layui-form-item {
        margin-bottom: 2px;
    }

    span {
        font-size: smaller;
    }
</style>

<body>
<div class="ok-body">
    <input type="hidden" name="lineId" th:value="${lineId}">
    <div class="layui-container">
        <div class="layui-row">

            <div class="layui-col-md12">
                <div class="layui-row layui-col-space5">
                    <div class="layui-col-md5">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend id="deviceStatusType">生产线设备故障统计图</legend>
                            <div class="layui-carousel" id="chartCarousel" lay-filter="chartCarousel">
                                <div carousel-item>
                                    <div>
                                        <div id="faultCount" style="width: 380px;height:400px;margin-top: 3%"></div>
                                    </div>

                                    <div>
                                        <div id="overHourCount" style="width: 380px;height:400px;margin-top: 3%"></div>
                                    </div>

                                    <div>
                                        <div id="totalTime" style="width: 380px;height:400px;margin-top: 3%"></div>
                                    </div>

                                </div>
                            </div>
                        </fieldset>
                    </div>

                    <div class="layui-col-md7">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>设备列表</legend>
                            <!--设备列表 开始-->
                            <table class="layui-hide" id="lineDeviceInfo" lay-filter="lineDeviceInfo"
                                   lay-size="sm"></table>
                            <div id="lineDeviceInfoPageDiv" style="display:none;"></div>
                            <!--设备列表 结束-->
                        </fieldset>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>历史故障列表</legend>
                    <table class="layui-hide" id="deviceFaultInfo" lay-filter="deviceFaultInfo" lay-size="sm"></table>
                    <div id="pageDiv"></div>
                </fieldset>
            </div>
        </div>
    </div>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/plugins/echarts/echarts.js"></script>
<script src="../static/js/echartOption.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    layui.use(['table', 'laypage', 'form', 'layer', 'carousel'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var carousel = layui.carousel;
        var lineId = JJZ.named('lineId').val();

        var firstOverHourCount = true;
        var firstTotalTime = true;

        //建造实例
        carousel.render({
            elem: '#chartCarousel'
            , width: '390px' //设置容器宽度
            , height: '420px' //设置容器宽度
            , arrow: 'hover' //悬停显示箭头
            , autoplay: false
            , indicator: 'none' //指示器位置不显示
            //,anim: 'updown' //切换动画方式
        });

        // 发生当月该生产线故障次数 设备
        var faultCountChart = echarts.init(document.getElementById('faultCount'));
        //本月故障时间超2小时故障次数TOP5设备
        var overHourCountChart = echarts.init(document.getElementById('overHourCount'));
        //本月故障时间TOP5设备
        var totalTimeChart = echarts.init(document.getElementById('totalTime'));

        //初始故障次数最多的设备图表
        faultCountChart.showLoading();
        JJZ.requestData('/productionLine/lineStatistics', 'lineId=' + lineId + '&type=1', function (data) {
            var countDataArr = [];
            var nameArr = [];
            faultCountChart.hideLoading();
            for (var index in data) {
                var temDateObj = {
                    tooltip: {}
                };
                var formatter = data[index].deviceName + '：<br> 发生故障次数：{c0}';
                temDateObj.tooltip.formatter = formatter;
                temDateObj.value = data[index].count;
                nameArr.push(data[index].deviceNumber);
                countDataArr.push(temDateObj);
            }
            lineFaultCountChartOption.series[0].data = countDataArr;
            lineFaultCountChartOption.xAxis.data = nameArr;
            faultCountChart.setOption(lineFaultCountChartOption);
        });

        carousel.on('change(chartCarousel)', function (obj) {
            if (obj.index == 1 && firstOverHourCount === true) {
                //故障时间超2小时故障次数TOP5设备
                overHourCountChart.showLoading();
                JJZ.requestData('/productionLine/lineStatistics', 'lineId=' + lineId + '&type=2', function (data) {
                    var countDataArr = [];
                    var nameArr = [];
                    overHourCountChart.hideLoading();
                    for (var index in data) {
                        var temDateObj = {
                            tooltip: {}
                        };
                        var formatter = data[index].deviceName + '：<br> 发生故障次数：{c0}';
                        temDateObj.tooltip.formatter = formatter;
                        temDateObj.value = data[index].count;
                        nameArr.push(data[index].deviceNumber);
                        countDataArr.push(temDateObj);
                    }
                    lineOverHourCountChartOption.series[0].data = countDataArr;
                    lineOverHourCountChartOption.xAxis.data = nameArr;
                    overHourCountChart.setOption(lineOverHourCountChartOption);
                    firstOverHourCount = false;
                });
            } else if (obj.index == 2 && firstTotalTime === true) {
                //故障总时间TOP5设备
                totalTimeChart.showLoading();
                JJZ.requestData('/productionLine/lineStatistics', 'lineId=' + lineId + '&type=3', function (data) {
                    var countDataArr = [];
                    var nameArr = [];
                    totalTimeChart.hideLoading();
                    for (var index in data) {
                        var temDateObj = {
                            tooltip: {}
                        };
                        var formatter = data[index].deviceName + '：<br> 发生故障总时长：{c0}';
                        temDateObj.tooltip.formatter = formatter;
                        temDateObj.value = data[index].totalDuration;
                        nameArr.push(data[index].deviceNumber);
                        countDataArr.push(temDateObj);
                    }
                    lineTotalTImeChartOption.series[0].data = countDataArr;
                    lineTotalTImeChartOption.xAxis.data = nameArr;
                    totalTimeChart.setOption(lineTotalTImeChartOption);
                    firstTotalTime = false;
                });
            }
        });

        var lineDeviceInfoRender = {
            elem: '#lineDeviceInfo'
            , title: '设备列表'
            , limit: 999
            , width: 580
            , height: 430
            , pageDiv: 'lineDeviceInfoPageDiv'
            , requestUrl: '/productionLine/lineDeviceInfo'   //使用自定义的请求url，不使用默认的，所以可以不要tableName这个属性
            , initParam: "lineId=" + lineId  //初始化的请求参数 ，不需要加上分页的设置参数 a=1&b=2;
            , page: false
            , cols: [[
                {field: 'number', title: '设备编号', width: 97, align: 'center'}
                , {field: 'name', title: '设备名称', align: 'center', width: 143, minWidth: 143}
                , {field: 'failCount', title: '故障总次数', align: 'center', width: 116, minWidth: 116}
                , {field: 'failTotalTime', title: '故障总时间', align: 'center', width: 116, minWidth: 116}
                , {
                    field: 'total', title: 'MTTR', align: 'center', width: 92, minWidth: 92, templet: function (d) {
                        return d.failTotalTime / d.failCount;
                    }
                }
                // , {field: 'maxFaultPart', title: '故障最多部位', align: 'center', width: 102, minWidth: 102}
            ]]
        };
        var myLineDeviceInfoTable = new JJZ.MyTable(lineDeviceInfoRender);

        var tableRenderObject = {
            elem: '#deviceFaultInfo'
            , title: '设备故障数据表'
            // ,width:630
            , requestUrl: '/productionLine/lineFaultInfo'   //使用自定义的请求url，不使用默认的，所以可以不要tableName这个属性
            , initParam: 'lineId=' + lineId   //初始化的请求参数 ，不需要加上分页的设置参数 a=1&b=2;
            , cols: [[
                {field: 'deviceNumber', title: '设备编号', align: 'center'}
                , {field: 'deviceName', title: '设备名称', align: 'center'}
                , {field: 'symptom', title: '现象', align: 'center', width: 100}
                , {
                    field: 'partName', title: '部位', align: 'center', width: 100, templet: function (d) {
                        if (d.faultContent) {
                            var devicePart = JSON.parse(d.faultContent);
                            var parts = [];
                            if (devicePart.length > 0) {
                                for (var index in devicePart) {
                                    parts.push(devicePart[index].faultPartName);
                                }
                            }
                            if (parts.length > 0) {
                                return parts.join('、');
                            } else {
                                return '无';
                            }
                        } else {
                            return '无';
                        }
                    }
                }
                , {field: 'reason', title: '原因分析', align: 'center'}
                , {field: 'resolvent', title: '排除过程', align: 'center'}
                , {
                    title: '故障时间', align: 'center', width: 120, templet: function (d) {
                        return JJZ.FormatDate(d.faultTime, 'yyyy-MM-dd');
                    }
                }
                , {field: 'duration', title: '维修用时', align: 'center', width: 95}
                , {field: 'stopDuration', title: '停机时间', align: 'center', width: 95}
                , {field: 'masterSolverName', title: '主维修', align: 'center', width: 100}
                , {field: 'solveName', title: '辅助维修', align: 'center', width: 100}
            ]]
        };
        var myTable = new JJZ.MyTable(tableRenderObject);

    });

    function showDeviceFaultDetail(deviceId) {
        JJZ.checkGetRequestPermission('/faultInfo/faultInfoDetail?id=' + deviceId, function (hasPermission) {
            if (hasPermission) {
                parent.layer.open({
                    type: 2
                    , content: '../faultInfo/faultInfoDetail?id=' + deviceId   //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    , area: ['90%', '80%']
                });
            } else {
                layer.msg('无权访问');
            }
        })
    }
</script>

</body>
</html>